MANVIA BLOGUI - API - Movie App
-
Screen 1
UI
1. FutureBuilder() -> return
pubspec.yaml
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 carousel_slider: ^5.0.0 animate_do: ^3.3.4 fl_chart: ^0.69.0 google_fonts: ^6.2.1 provider: ^6.1.2 syncfusion_flutter_gauges: ^27.1.56 flutter_staggered_grid_view: ^0.7.0 #flutter_svg: ^2.0.10+1 svg_flutter: ^0.0.1 http: ^1.2.1 main.dart
import 'package:flutter/material.dart'; import 'package:b/Screen/home_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen(), ); } } Services/services.dart
import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:b/Model/model.dart'; const apiKey = "f95a6d45558dee5ab593965b75e80dfd"; class APIservices { final nowShowingApi = "https://api.themoviedb.org/3/movie/now_playing?api_key=$apiKey"; final upComingApi = "https://api.themoviedb.org/3/movie/upcoming?api_key=$apiKey"; final popularApi = "https://api.themoviedb.org/3/movie/popular?api_key=$apiKey"; // for nowShowing moveis Future<List<Movie>> getNowShowing() async { Uri url = Uri.parse(nowShowingApi); final response = await http.get(url); if (response.statusCode == 200) { final List<dynamic> data = json.decode(response.body)['results']; List<Movie> movies = data.map((movie) => Movie.fromMap(movie)).toList(); return movies; } else { throw Exception("Failed to load data"); } } // for up coming moveis Future<List<Movie>> getUpComing() async { Uri url = Uri.parse(upComingApi); final response = await http.get(url); if (response.statusCode == 200) { final List<dynamic> data = json.decode(response.body)['results']; List<Movie> movies = data.map((movie) => Movie.fromMap(movie)).toList(); return movies; } else { throw Exception("Failed to load data"); } } // for popular moves Future<List<Movie>> getPopular() async { Uri url = Uri.parse(popularApi); final response = await http.get(url); if (response.statusCode == 200) { final List<dynamic> data = json.decode(response.body)['results']; List<Movie> movies = data.map((movie) => Movie.fromMap(movie)).toList(); return movies; } else { throw Exception("Failed to load data"); } } } Screen/home_screen.dart
import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; import 'package:b/Services/services.dart'; import '../Model/model.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State<HomeScreen> createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { late Future<List<Movie>> nowShowing; late Future<List<Movie>> upComing; late Future<List<Movie>> popularMovies; @override void initState() { nowShowing = APIservices().getNowShowing(); upComing = APIservices().getUpComing(); popularMovies = APIservices().getPopular(); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Movei App"), leading: const Icon(Icons.menu), centerTitle: true, actions: const [ Icon(Icons.search_rounded), SizedBox(width: 20), Icon(Icons.notifications), SizedBox(width: 10), ], ), body: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(8), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( " Now Showing", style: TextStyle( fontWeight: FontWeight.normal, fontSize: 18, color: Colors.black, ), ), const SizedBox(height: 10), FutureBuilder( future: nowShowing, builder: (context, snapshot) { if (!snapshot.hasData) { return const Center( child: CircularProgressIndicator(), ); } final movies = snapshot.data!; return CarouselSlider.builder( itemCount: movies.length, itemBuilder: (context, index, movieIndex) { final movie = movies[index]; return Stack( children: [ Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), image: DecorationImage( image: NetworkImage( "https://image.tmdb.org/t/p/original/${movie.backDropPath}", ), fit: BoxFit.cover, ), ), ), Positioned( bottom: 15, left: 0, right: 0, child: Text( movie.title, textAlign: TextAlign.center, maxLines: 1, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 18, color: Colors.white, ), ), ) ], ); }, options: CarouselOptions( autoPlay: true, enlargeCenterPage: true, aspectRatio: 1.7, autoPlayInterval: const Duration(seconds: 5), ), ); }, ), const SizedBox(height: 20), const Text( " Up Coming Movies", style: TextStyle( fontWeight: FontWeight.normal, fontSize: 18, color: Colors.black, ), ), Container( margin: EdgeInsets.symmetric(vertical: 10), height: 250, child: FutureBuilder( future: upComing, builder: (context, snapshot) { if (!snapshot.hasData) { return const Center( child: CircularProgressIndicator(), ); } final movies = snapshot.data!; return ListView.builder( scrollDirection: Axis.horizontal, itemCount: movies.length, itemBuilder: (context, index) { final movie = movies[index]; return Stack( children: [ Container( width: 180, margin: const EdgeInsets.symmetric(horizontal: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), image: DecorationImage( image: NetworkImage( "https://image.tmdb.org/t/p/original/${movie.backDropPath}"), fit: BoxFit.cover, ), ), ), Positioned( bottom: 15, left: 0, right: 0, child: Text( movie.title, textAlign: TextAlign.center, maxLines: 1, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16, color: Colors.white, ), ), ) ], ); }); }, ), ), const SizedBox(height: 10), const Text( " Popular Movies", style: TextStyle( fontWeight: FontWeight.normal, fontSize: 18, color: Colors.black, ), ), Container( margin: const EdgeInsets.symmetric(vertical: 10), height: 250, child: FutureBuilder( future: popularMovies, builder: (context, snapshot) { if (!snapshot.hasData) { return const Center( child: CircularProgressIndicator(), ); } final movies = snapshot.data!; return ListView.builder( scrollDirection: Axis.horizontal, itemCount: movies.length, itemBuilder: (context, index) { final movie = movies[index]; return Stack( children: [ Container( width: 180, margin: const EdgeInsets.symmetric(horizontal: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), image: DecorationImage( image: NetworkImage( "https://image.tmdb.org/t/p/original/${movie.backDropPath}"), fit: BoxFit.cover, ), ), ), Positioned( bottom: 15, left: 0, right: 0, child: Text( movie.title, textAlign: TextAlign.center, maxLines: 1, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16, color: Colors.white, ), ), ) ], ); }); }, ), ), ], ), ), ), ); } } Model/model.dart
class Movie { final String title; final String backDropPath; Movie({ required this.title, required this.backDropPath, }); factory Movie.fromMap(Map<String, dynamic> map) { return Movie( title: map['title'], backDropPath: map['backdrop_path'], ); } Map<String, dynamic> toMap() { return { 'title': title, 'backDropPath': backDropPath, }; } }